<template>
	<scroll-view scroll-y="true" style="height: auto;">
		<form @submit="saveinfo">
		<view class="head">
			<view class="title">{{typetitle}}</view>
			<view class="textareas">
					<textarea name="description" @input="checktext" style="height: 180rpx;width: 100%;" maxlength="200" placeholder="请填写10个字以上的问题描述以便我们提供更好的帮助"></textarea>
					<text>{{textleng}}/200</text>
			</view>
		</view>
		<!--相关截图-->
		<view class="screenshot">
			<text>相关截图(选填) </text>
			<uploadimgs :imgnum="imgnum" :imglist="thumb"></uploadimgs>
		</view>
		<!--联系-->
		<view class="contact">
			<text style="margin-right: 10rpx;">联系方式</text>
			<input name="contact" placeholder="邮箱/手机" maxlength="20"/>
		</view>
		<!-- 提示-->
		<view class="tip">
			<radio value="r1" style="transform: scale(0.6);"/>允许开发者在48小时内通过客服消息联系我
		</view>
		<!--按钮-->
		<button form-type="submit" class="save-button">提交</button>
		</form>
	</scroll-view>
</template>

<script>
	/**
	 * 上传反馈
	 */
	export default{
		data(){
			return{
				imgnum:4,
				textleng:0,
				typetitle:'其他',
				thumb:[],//缩略图
			}
		},
		onLoad(option) {
			this.typetitle = option.typetitle
		},
		methods:{
			saveinfo(e){
				let form  = e.detail.value;
				form.type = 'feedback';
				form.title= this.typetitle;
				form.thumb = this.thumb;
				if(!form.description){
					this.$ShowMsg('请简单描述一下您的宝贵建议！');
					return;
				}
				this.$HttRequest({
						url: '/feedback/add',
						param:form
					},'POST',true).then((res) => {
						if (res.status === 10000) {
							this.$ShowMsg('感谢您的反馈，我们将竭诚为您服务！');
							setTimeout(()=>{
								uni.switchTab({
									url:'/pages/member/member',
								})
							},2000)
							
						} else {
							this.$ShowMsg(res.message)
						}
					}).catch((error) => {
						//异常错误
						this.$ShowMsg('statusCode：' + error.errMsg);
					});
				},
			checktext(e){
				this.textleng = e.detail.value.length;
			}
		}
	}
	
	
</script>

<style lang="scss">
	.tip{
		width: 90%;
		font-size: 25rpx;
		color: #808080;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 80rpx;
		margin-bottom:30rpx ;
	}
	.save-button{
		margin: 20rpx auto;
		width: 65%;
		height: 90rpx;
		background-color: $uni-color-primary;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
		margin-bottom: 40rpx;
		
	}
	.contact{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 85%;
		margin: 0 auto;
		font-size: 32rpx;
		margin-top: 30rpx;
		border-top: 1rpx solid #dadada;
				border-bottom: 1rpx solid #dadada;
				padding: 40rpx 0;
	}
	.screenshot{
	display: flex;
	flex-direction: column;
	justify-content:  center;
	align-items: flex-start;
	width: 90%;
	margin: 0 auto;
	font-size: 32rpx;
	margin-top: 30rpx;

	}
	.head{
		display: flex;
		flex-direction: column;
		justify-content: center;
	
		width: 85%;
		margin: 0 auto;
		font-size: 32rpx;
		.title{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 100rpx;
		}
		.textareas{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-top: 1rpx solid #dadada;
			border-bottom: 1rpx solid #dadada;
			padding: 20rpx 0;
			text{
				font-size: 22rpx;
				color: #cccbcc;
			}
		}
	}
</style>
